<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title>form-demo</title>
<link href="form.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
</script>
</head>
<body>

<div class="formContainer">

    <div class="row">
          <label class="tit">不含fieldset带边框<em>*</em></label>
          <div class="con">
            <span class="tips">调用规则为在formContainer层加入borderStyle</span>
          </div>
      </div>
      
      <div class="row">
          <label class="tit">注意<em>*</em></label>
          <div class="con">
            <span class="error">带边框表单为CSS3 box-sizing属性，IE6/7不支持</span>
          </div>
      </div>      
</div>

<div class="formContainer borderFieldset">
<fieldset>
    <legend class="togglers">包含fieldset带边框</legend>
    
        <div class="row w1column">
            <label class="tit">带边框双列行<em>*</em></label>
            <div class="con">
                <span class="tips">含fieldset表单调用规则为在formContainer层加入borderFieldset</span>
            </div>
        </div>
        
        <div class="row">
            <label class="tit">注意<em>*</em></label>
            <div class="con">
                <span class="error">带边框表单为CSS3 box-sizing属性，IE6/7不支持</span>
            </div>
        </div>
        
        <div class="row">
            <label class="tit">带边框双列行<em>*</em></label>
            <div class="con">
              <span class="tips">可对".formContainer.borderFieldset&nbsp;legend"重新定义CSS</span>
            </div>
        </div>        
  </fieldset>
</div>

<div class="formContainer">
<fieldset>
    <legend class="togglers">行列调用</legend>
        
        <div class="row">
            <label class="tit">一行两列</label>
            <div class="con">
                <input type="text" />
                <span class="tips">基本列即为一行两列</span>
                <span class="clear">当屏幕宽小于480px时自动转换为一行一列</span>
            </div>
        </div>
        <div class="row">
            <label class="tit">一行两列</label>
            <div class="con">
                可以直接在con里输入文字
                <span class="clear">基本列即为一行两列</span>
            </div>
        </div>
    
        <div class="row w1column">
            <label class="tit">一行一列<em>*</em></label>
            <div class="con">
                <input type="text" />
                <span class="tips">一行一列，在row加入w1columu</span>
            </div>
        </div>
        <div class="row w1column">
            <label class="tit">一行一列内容显示<em>*</em></label>
            <div class="con">
                直接在con里书写文字
            </div>
        </div>
        
        <div class="columnPanel">
            <label class="tit">通栏<em>*</em></label>
            <div class="con">
                <textarea name="" cols="" rows=""></textarea>
                <span class="note">通栏是指内容区con为整个区域，<span class="tips">调用方式为columnPanel（即替换日常使用的row为columnPanel）</span></span>
            </div>
        </div>
        <div class="columnPanel">
            <label class="tit">通栏文字内容显示<em>*</em></label>
            <div class="con">
                直接在con里书写文字
            </div>
        </div>
        
  </fieldset>
</div>

<div class="formContainer">
<fieldset>
    <legend class="togglers">基本调用方式</legend>
    
        <div class="row">
            <label class="tit">一般输入框<em>*</em></label>
            <div class="con">
                <input type="text" />
                <span class="note">一般输入框无需赋予样式</span>
                <span class="tips clear">一般输入框一行两列时为50%，一行一列时为70%</span>
            </div>
        </div>
        
        <div class="row">
            <label class="tit">长输入框<em>*</em></label>
            <div class="con">
              <input type="text" class="wWide" />
              <span class="note">class="wWide"</span>
              <span class="tips clear">长输入框一行两列时为70%，一行一列时为90%</span>
            </div>
        </div>
        
        <div class="row">
            <label class="tit">短字符框<em>*</em></label>
            <div class="con">
              <input type="text" class="short"/>
              <input type="text" class="short"/>
              <span class="note">input class="short"</span>
                <span class="tips clear">短字框限定为6em，不随屏幕尺寸变化。可重复使用</span>
            </div>
        </div>
        
        <div class="row">
            <label class="tit">数字类框<em>*</em></label>
            <div class="con">
              <input type="text" class="umber"/>
              <input type="text" class="umber"/>
              <span class="note">input class="umber"</span>
                <span class="tips clear">数字框限定为3em，不随屏幕尺寸变化。数字类框可重复使用</span>
            </div>
        </div>
        
        <div class="row w1column">
            <label class="tit">数字类框<em>*</em></label>
            <div class="con umberData">
                <input type="text"/>
                <input type="text"/>
                <input type="text"/>
                <input type="text"/>
                <input type="text"/>
                <input type="text"/>
                <span class="note clear"><span class="tips">数字可在con 容器增加 umberData方式调用，</span>此种方式适合con区域均为数字或短文字输入框</span>
            </div>
        </div>
        
        <div class="row w1column">
            <label class="tit">短文字类<em>*</em></label>
            <div class="con shortText">
                <input type="text"/>
                <input type="text"/>
                <input type="text"/>
                <input type="text"/>
                <input type="text"/>
                <input type="text"/>
                <span class="note clear">在con 容器增加 shortText方式调用，此种方式适合con区域均为数字或短文字输入框</span>
            </div>
        </div>
        
        <div class="row w1column">
            <label class="tit">短文字类2<em>*</em></label>
            <div class="con shortText">
               <label>标题1:<input type="text"/></label>
               <label>标题2:<input type="text"/></label>
               <label>标题3:<input type="text"/></label>
                <input type="text"/>
                <input type="text"/>
                <input type="text"/>
                <span class="note clear">在con 容器增加 shortText方式调用，此种方式适合con区域均为数字或短文字输入框</span>
            </div>
        </div>
        <div class="row">
            <label class="tit">单选及复选</label>
            <div class="con">
                <label><input type="radio" >单选</label>
                <label><input type="radio">会员</label>
                <label><input type="checkbox"/>复选</label>
                <label><input type="checkbox"/>操作员</label>
                <button>按钮</button>
                <span class="tips">应使用label容器包围</span>
            </div>
        </div>
        
        <div class="row">
          <label class="tit">缩略图调用</label>
            <div class="con">
              <input type="text" />
              <span class="upImg"><img src="s_none.gif"></span>
              <button>上传</button>
              <label><input type="checkbox" checked>缩小</label>
          </div>
    </div>
        
<div class="row w1column">
            <label class="tit">文字输出及提示<em>*</em></label>
            <div class="con">
                文字输出可直接在con区域内输入文字
                <span class="note">也可在文字后直接跟提示信息</span>
                <input type="text" /><span class="error">直接跟错误信息</span>
                <span class="tips clear">换行提示是在span内加入调用clear样式</span>
            </div>
        </div>
        <div class="row w1column">
            <label class="tit">内容框textarea<em>*</em></label>
            <div class="con">
              <textarea name="textarea" id="textarea"></textarea>
              <span class="note clear">textarea宽带为98%</span>
            </div>
        </div>
                
        <div class="row w1column">
            <label class="tit">a标签的调用<em>*</em></label>
            <div class="con">
                <input type="text" class="short" /><a href="">a标签</a><a onclick="">调用</a><a onblur="">直接添加a标签</a><span class="tips">a标签可任意添加，a标签颜色及样式由各调用页面控制，本处不做控制</span>
            </div>
        </div>
                
<div class="row">
            <label class="tit">回答问题面板</label>
            <div class="con">
                <label><input type="radio">"回答问题"后可见</label>
                <div class="passPanel">
                    <div>问题：<input type="text"><span class="note">(0/20)</span></div>
                    <div>答案：<input type="password"><span class="note">(0/20)</span></div>
                    <span class="note">问题面板调用方式为passPanel</span>
                </div>
            </div>
        </div>
        
        <div class="row">
            <label class="tit">多列内容</label>
            <div class="con">
                <div class="list">可输出多列文字内容，也可放入各类元素</div>
                <div class="list">
                  <label><input type="radio">单选</label>
                  <label><input type="checkbox" />复选</label>
                </div>
                <div class="list"><input type="text" /></div>
                <span class="tips clear">多列输出，应使用div class=list方式调用，不应使用span class=list调用</span>
            </div>
        </div>
        
        <div class="row w1column">
            <label class="tit">各类input类型<em>*</em></label>
          <div class="con">
              <div class="list"><input type="date"/><span class="note">date时间控制器；</span></div>
              <div class="list"><input type="datetime"/><span class="note">date（UTC 时间）</span></div>
              <div class="list"><input type="datetime-local"/><span class="note">datetime-local（本地时间）</span></div>
              <div class="list"><input type="time"/><span class="note">time时分选择器</span></div>
              <div class="list"><input type="month"/><span class="note">month月份选择器</span></div>
              <div class="list"><input type="number" name="quantity" min="1" max="5"><span class="note">number限定数字框</span></div>
              <div class="list"><input type="color"/><span class="note">color颜色选择器</span></div>
              <div class="list"><input type="range" name="points" min="1" max="10" /><span class="note">range滑动控制器</span></div>
              <div class="list">
                <input style="email" />
                <select name="">
                  <option>select列表</option>
                </select>
              <span class="note">email类型和select列表</span></div>
              <span class="tips clear">部分input type为h5属性，请<a href="http://www.runoob.com/html/html5-form-input-types.html" target="_blank">参看H5新属性</a></span>
          </div>
        </div>
        
    <div class="buttonPanel"><button>按钮调用</button><button>按钮调用</button><span class="tips">按钮面板为buttonPanel</span></div>
        
    </fieldset>
</div>


<div class="formContainer">
<fieldset>
    <legend class="togglers">说明note、提示tips、错误error等信息调用方式</legend>
        <div class="row">
            <label class="tit">说明信息<span>（备注说明）</span></label>
            <div class="con">
                <input type="text" />
              <span class="note">说明信息调用为span calss=&quot;note&quot;</span>
            </div>
        </div>
        
        <div class="row">
            <label class="tit">提示信息<em>*</em></label>
            <div class="con">
                <input type="text" />
              <span class="tips">提示信息调用为span calss=&quot;tips&quot;</span>
            </div>
        </div>
        
        <div class="row">
            <label class="tit">错误提示<em>*</em></label>
            <div class="con">
                <input type="text" />
                <span class="error">错误信息调用为span calss=&quot;error&quot;</span>
            </div>
        </div>
        
        <div class="row">
            <label class="tit">提示信息混用方式1<em>*</em></label>
            <div class="con">
                <input type="text" />
                <span class="note">note、</span><span class="tips">tips、</span><span class="error">error可并列使用</span>
            </div>
        </div>
        
        <div class="row w1column">
            <label class="tit">提示信息混用方式1<em>*</em></label>
            <div class="con">
                <input type="text" />
                <span class="note clear">换行模式下note、<span class="tips">tips、</span><span class="error">error</span>的混用采取span包含方式。实际使用意义不大，不做修正</span>
            </div>
        </div>
    </fieldset>
</div>


<div class="formContainer">
<fieldset>
    <legend class="togglers">其他扩展形式需完善</legend>
        <div class="multiseriate">
            <div class="row-3columns tit">
                <div>一行三列</div>
                <div>第二列</div>
                <div>第三列</div>
            </div>
            <div class="row-3columns">
                <div><input type="text" /></div>
                <div><input type="text" /></div>
                <div><input type="text" /></div>
            </div>
            <div class="row-3columns">
                <div>可直接输入文字</div>
                <div><span class="tips">也可嵌套提示tips</span></div>
                <div><input type="text" /></div>
            </div>
        </div>
        <div class="multiseriate">
            <div class="row-4columns tit">
                <div>一行四列</div>
                <div>第二列</div>
                <div>第三列</div>
                <div>第四列</div>
            </div>
            <div class="row-4columns">
                <div><input type="text" /></div>
                <div><input type="text" /></div>
                <div><input type="text" /></div>
                <div><input type="text" /></div>
            </div>
            <div class="row-4columns">
                <span class="tips">一行多列模式，现仅有3列和4列，调用为最外层multiseriate，内嵌套层分别为row3columns或row4columns</span>
            </div>
        </div>
        <div class="row w1column">
            <label class="tit">一行多列右侧调用</label>
            <div class="con multiseriate">
                <div class="row-4columns tit">
                    <div>一行四列</div>
                    <div>第二列</div>
                    <div>第三列</div>
                    <div>第四列</div>
                </div>
                <div class="row-4columns">
                    <div><input type="text" /></div>
                    <div><input type="text" /></div>
                    <div><input type="text" /></div>
                    <div><input type="text" /></div>
                </div>
                <span class="tips clear">此种调用，在row的con内，别列调用multiseriate</span>
              </div>
        </div>
        <div class="row">
            <label class="tit">多列平分区域</label>
            <div class="con">见游戏后台
            </div>
        </div>

        <div class="row">
            <label class="tit"><input type="text" value="tit区域编辑模式" /></label>
            <div class="con">tit区域编辑模式<span class="tips">直接在tit区域加入input type="text"</span></div>
        </div>
        <div class="row">
            <label class="tit">序列式</label>
            <div class="con">见餐饮m_fenlei</div>
        </div>
    </fieldset>
</fieldset>
</div>


<div class="formContainer">
<fieldset>
    <legend class="togglers">一行两列效果</legend>
        <div class="row">
            <label class="tit">名称</label>
            <div class="con">
              <input type="text" />
              <span class="upImg"><img src="s_none.gif"></span>
              <button>上传</button>
              <label><input type="checkbox" checked>缩小</label>
          </div>
        </div>
        <div class="row">
            <label class="tit">密码及按钮<em>*</em></label>
            <div class="con">
                <input type="password" />
                <input type="button" value="按钮" />
                <span class="error">错误信息</span> </div>
        </div>
  </fieldset>
</div>
<div class="formContainer">
<fieldset>
    <legend class="togglers">一行一列效果</legend>
        <div class="row w1column">
            <label class="tit">一般输入框<em>*</em></label>
            <div class="con">
                <input type="text" />
              <span class="note">提示信息调用为span calss=&quot;note&quot;</span>
            </div>
        </div>
  </fieldset>
</div>
</body>
</html>
